<template>
  <div class="order clearfix">
    <div class="left">
      <div class="title">账单地址</div>
      <div class="address">
        <div>
          <label for="name">姓名</label>
          <span
            v-show="flag"
            style="color: red; font-size: 12px; margin-left: 10px"
            >姓名不能为空</span
          >
          <br />
          <input
            type="text"
            id="name"
            placeholder="请输入您的姓名"
            v-model="name"
            @blur="input()"
          />
        </div>
        <div>
          <label for="phone">电话</label>
          <span
            v-show="fl"
            style="color: red; font-size: 12px; margin-left: 10px"
            >电话号码必须是11位数字</span
          >
          <br />
          <input
            type="text"
            id="phone"
            placeholder="请输入您的电话"
            v-model="phone"
            @blur="inputphone()"
          />
        </div>
        <div>
          <p>省市区</p>
          <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </div>
        <div>
          <label for="phone">地址</label><br />
          <input
            type="text"
            id="phone"
            placeholder="请输入您详细地址"
            v-model="addr"
          />
        </div>
        <div>
          <h2>其他信息</h2>
          <p>订单备注</p>
          <textarea
            placeholder="有关订单的注释，例如，交货的特殊注释。"
            rows="2"
            cols="5"
            style="
              margin: 0px 11.1562px 0px 0px;
              width: 635px;
              height: 64px;
              padding: 10px;
            "
          ></textarea>
        </div>
      </div>
    </div>
    <div class="right">
      <h2>订单详情</h2>
      <table>
        <thead>
          <tr>
            <th>商品</th>
            <th>合计</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(p, i) of ps" :key="i">
            <td>
              <router-link :to="`/about/${p.pid}`">
                <img :src="p.maxpic" alt="" />
                <span> {{ p.pname }}</span
                >&nbsp;
                <strong> × {{ p.count }}</strong>
              </router-link>
            </td>
            <td>￥{{ p.price * p.count }}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>购物车小计</td>
            <td>
              <p>￥{{ total }}</p>
            </td>
          </tr>
          <tr>
            <td>运费</td>
            <td><p>普通快递：￥50</p></td>
          </tr>
          <tr>
            <td>订单总计</td>
            <td>
              <p>￥{{ total + 50 }}</p>
            </td>
          </tr>
        </tfoot>
      </table>
      <div class="zf">
        <p><input type="radio" name="zf" /> 银行汇款(线下)</p>
        <p>
          <input type="radio" name="zf" /> 支付宝
          <img src="/img/zfb.png" alt="" />
        </p>
        <p>
          <input type="radio" name="zf" /> 微信支付
          <img src="/img/wx.png" alt="" />
        </p>
      </div>
      <div class="btn">
        <button>立即支付</button>
      </div>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import { mapState } from "vuex";
export default {
  //   name: "app",
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      ps: [],
      name: "",
      phone: "",
      addresss: "",
      remake: "",
      addr: "",
      flag: false,
      fl: false,
    };
  },

  methods: {
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      this.addresss = loc + this.addr;
      console.log(this.addresss);
    },
    input() {
      if (this.name == "") {
        this.flag = true;
      } else {
        this.flag = false;
      }
    },
    inputphone() {
      if (/^[1][3-9]\d{9}$/.test(this.phone)) {
        console.log(/^[1][3-9][1-9]\d{9}$/.test(this.phone), 1);
        this.fl = false;
      } else {
        this.fl = true;
        console.log(/^[1][3-9][1-9]\d{9}$/.test(this.phone), 2);
      }
    },
  },
  mounted() {
    this.axios.get(`/cart?uid=${this.uid}`).then((res) => {
      console.log(res);
      this.ps = res.data;
      //   console.log(this.ps);
    });
  },
  computed: {
    ...mapState(["uid"]),
    total() {
      var result = this.ps.reduce(function (res, p) {
        return res + p.price * p.count;
      }, 0);
      return result;
    },
  },
};
</script>













<style>
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.order {
  width: 1200px;
  min-height: 600px;
  margin: 80px auto;
  border-bottom: 2px solid #dddddd;
}
.order .left {
  float: left;
  width: 665px;
}
.order .right {
  float: right;
  width: 500px;
  /* height: 600px; */
  box-sizing: border-box;
  padding: 30px;
  border: 3px solid #e8e8e8;
}
.order .left .title {
  font-size: 24px;
  color: #000000;
  height: 31px;
  margin-bottom: 10px;
}

.order .left .address > div {
  margin-bottom: 20px;
}
.order .left .address label {
  height: 30px;
}
.order .left .address input {
  width: 655px;
  height: 41px;
  /* padding: 0 5px; */
  margin-top: 5px;
  font-size: 14px;
  font-weight: normal;
  color: #999999;
  border: 1px solid #cccccc;
  box-sizing: border-box;
  padding: 0 10px;
}
.order .left .address > div h2 {
  font-size: 24px;
  font-weight: normal;
  color: #000000;
  margin-bottom: 25px;
}
.order .left .address > div p {
  font-size: 15px;
  font-weight: normal;
  color: #4d4d4d;
}

/* 订单详情 */
.order .right h2 {
  font-size: 22px;
  font-weight: bold;
  color: #000000;
}
.order .right table thead {
  text-align: left;
  font-size: 16px;
  color: #444;

  border-bottom: 3px solid #ddd;
  line-height: 31px;
}
.order .right table thead tr th:first-child {
  width: 300px;
  height: 31px;
  box-sizing: border-box;
  padding: 8px 12px;
}
.order .right table thead tr th:nth-child(2) {
  width: 130px;
  height: 31px;
  box-sizing: border-box;
  padding: 8px 12px;
}
.order .right table tbody tr td {
  padding: 8px;
  font-size: 14px;
  font-weight: normal;
  color: #777777;
  height: 40.5px;
  line-height: 40.5px;
  border-bottom: 1px solid #dddddd;
}
.order .right table tbody tr td span {
  color: #000;
}
.order .right table tbody tr td strong {
  font-weight: 1000;
  color: rgb(104, 99, 99);
}
.order .right table tbody tr td img {
  width: 40px;
  height: 40px;
}
.order .right table tfoot tr td {
  font-size: 16px;
  font-weight: normal;
  color: #444444;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  border-bottom: 1px solid #dddddd;
}
.order .right table tfoot tr td:nth-child(2),
.order .right table thead tr th:nth-child(2),
.order .right table tbody tr td:nth-child(2) {
  text-align: right;
}
.order .right .zf {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: normal;
  color: #4d4d4d;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}
.order .right .zf p {
  height: 30px;
  line-height: 30px;
}
.order .right .zf p img {
  margin-left: 8px;
}
.order .right .btn button {
  width: 250px;
  height: 48px;
  font-size: 16px;
  color: white;
  background-color: #d19f4f;
  border: none;
}
.order .right .btn button:hover {
  background-color: #bd8448;
}
</style>



